<template>
  <div class="content">
    <div class="side">
      <CaseBox :title="'安全会议记录'">
        <template #content>
          <el-calendar ref="calendarRef" v-model="calendar" >
            <template #date-cell="{ data }">
              <p :class="hasImgDays.includes(data.day.split('-').join('-')) ? 'is-selected' : ''">
                <!-- {{ data.day.split('-').join('-') }} -->
                {{ data.day.split('-')[2] }}
                <!-- {{ hasImgDays.includes(data.day.split('-').join('-')) ? '·' : '' }} -->
                <!-- {{ hasImgDays.includes(data.day.split('-').join('-')) ? '✔️' : '' }} -->
              </p>
      
            </template>
            <template #header="{ date }">
              <el-button-group>
                <el-button size="small" @click="selectDate('prev-year',date)">
                  <img src="@/assets/pre_year.png" alt="">
                </el-button>
                <el-button size="small" @click="selectDate('prev-month',date)">
                  <img src="@/assets/pre_month.png" alt="">
                </el-button>
                <el-button size="small" @click="selectDate('today')">{{date}}</el-button>
                <el-button size="small" @click="selectDate('next-month',date)">
                  <img src="@/assets/next_month.png" alt="">
                </el-button>
                <el-button size="small" @click="selectDate('next-year',date)">
                  <img src="@/assets/next_year.png" alt="">
                </el-button>
              </el-button-group>
            </template>
          </el-calendar>
        </template>
      </CaseBox>
      <CaseBox :title="'安全教育视频'">
        <template #content>
          <div class="education">
            <div class="title">
              <p><span>序号</span> <span>视频名称</span></p>
            </div>
            <div class="list" v-for="item in videolist" :key="item.index">
              <p>
                <span class="index">{{ item.index }}</span>
                <span>{{ item.name }}</span>
              </p>
              <p class="play" @click="playVideo(item.src)">播放</p>
            </div>
          </div>
        </template>
      </CaseBox>
    </div>
    <div class="safe">
      <div class="title">
        <img src="../../assets/circle.png" alt="" />
        <p v-if="!showVideo">安全会议记录</p>
        <p v-else>安全教育视频</p>
      </div>
      <div class="video">
        <!-- <img src="../../assets/safe.png" alt=""> -->
        <div class="swiper-container" v-show="!showVideo">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in dayImgs" :key="item.id">
              <img :src="item.src" alt="" srcset="">
            </div>
          </div>
           <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"><img src="../../assets/pre.png" alt=""> </div>
          <div class="swiper-button-next"><img src="../../assets/next.png" alt=""></div>
        </div>
        <div class="safe_video" v-show="showVideo">
          <video controls autoplay muted :src="currentVideo"></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "../../swiper/swiper-bundle.min.js";
import "../../swiper/swiper-bundle.min.css";
import { ElMessage } from 'element-plus'
import CaseBox from "../../components/Case.vue";
import { ref, computed, onMounted,watch } from "vue";

import { imglist,videolist } from "./srcList.json";

export default {
  name: "safeView",
  components: {
    CaseBox,
  },
  setup() {
    let mySwiper 
    let currentVideo = ref()
    let showVideo = ref(true)
    currentVideo.value = videolist[0].src
    const current = new Date();
    let dayImgs = ref([])
    let hasImgDays = imglist.map(item=>{
      return item.date
    })
    hasImgDays = Array.from(new Set(hasImgDays))
    const calendar = ref(new Date());
    const calendarDay = computed(() =>
      calendar.value.getFullYear()+'-'+checkTime((calendar.value.getMonth()+1))+'-'+checkTime(calendar.value.getDate())
    );
    watch(calendar,()=>{
      let imgs = imglist.filter(item=>{
        // console.log(calendarDay.value,item.date);
        return item.date==calendarDay.value
      })
      if(imgs.length==0){
        ElMessage({
          message: '当前日期没有安全会议记录',
          type: 'warning',
        })
        // dayImgs.value=[]
      }else{
        mySwiper.slideTo(0);
        dayImgs.value = imgs
        showVideo.value = false
        // initSwiper()
      }
      console.log(dayImgs.value,'dayImgs');
    })
    function checkTime(i) {
      console.log(i < 10,'i < 10');
      if (i < 10) {i = "0" + i}  // 如果数字小于10，则前面添加0
      return i;
    }
    const currentYear = ref(current.getFullYear());
    const currentMonth = ref(current.getMonth() + 1);
    console.log(currentMonth.value, currentYear.value);
    const daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"];
    const daysInMonth = computed(() =>
      new Date(currentYear.value, currentMonth.value, 0).getDate()
    );
    const currentMonthDates = computed(() => {
      let dates = [];
      for (let day = 1; day <= daysInMonth.value; day++) {
        dates.push(new Date(currentYear.value, currentMonth.value - 1, day));
      }
      return dates;
    });

    const playVideo = (src)=>{
      showVideo.value = true
      // dayImgs.value = []
      currentVideo.value = src
      console.log(currentVideo.value,'playVideo');
    }
    function isToday(date) {
      const today = new Date();
      return (
        date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
      );
    }

    function prevMonth() {
      if (currentMonth.value === 1) {
        currentYear.value--;
        currentMonth.value = 12;
      } else {
        currentMonth.value--;
      }
    }

    function nextMonth() {
      if (currentMonth.value === 12) {
        currentYear.value++;
        currentMonth.value = 1;
      } else {
        currentMonth.value++;
      }
    }

    const calendarRef = ref()
    const selectDate = (val,data) => {
      console.log(val,'selectDate');
      if(val=='next-year'&&getNumbers(data)[0]>=currentYear.value){
        ElMessage({
          message: '当前已是最新年份日期',
          type: 'warning',
        })
        return
      }
      if(val=='next-month'&&getNumbers(data)[0]>=currentYear.value&&getNumbers(data)[1]>=currentMonth.value){
        ElMessage({
          message: '当前已是最新日期',
          type: 'warning',
        })
        return
      }
      if (!calendarRef.value) return
      calendarRef.value.selectDate(val)
    }
    function getNumbers(str) {
      const regex = /\d+/g;
      return str.match(regex).map(Number);
    }
    function initSwiper(){
      mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,
        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
         // 当slide数量发生变化时的回调
        onSlideChange: function(swiper) {
          console.log('Slide changed to ' + swiper.activeIndex + '. Total slides: ' + swiper.slides.length);
        },
        // 监听动态添加或删除slide的情况
        observer: true, // 开启观察者模式
        observeParents: true ,
        observeSlideChildren: true,
        on:{
          //轮播切换事件
          slideChangeTransitionEnd: function(){
            console.log(this.activeIndex);
            // 检查是否是最后一页
            // var index = mySwiper.activeIndex;
            // if (index === mySwiper.slides.length - 1) {
            //   // 是最后一页，显示提示
            //   ElMessage({
            //     message: '当前是最后一页',
            //     type: 'warning',
            //   })
            // }else if(index ==0 ){
            //   ElMessage({
            //     message: '当前是第一页',
            //     type: 'warning',
            //   })
            // }
          },
          observerUpdate: function(){
            // alert('监测到DOM变化，更新Swiper')
            this.activeIndex=0
            console.log('observerUpdate');
            mySwiper.slideTo(0);
            mySwiper.init()
          },
          // touchEnd: function(){
          //   ElMessage({
          //     message: 'reachEnd',
          //     type: 'warning',
          //   })
          //   return true
          // },
        },
      });
    }

    onMounted(() => {
      initSwiper()
    });
    return {
      currentMonth,
      currentYear,
      currentVideo,
      showVideo,
      currentMonthDates,
      daysOfWeek,
      calendar,
      calendarDay,
      imglist,
      dayImgs,
      hasImgDays,
      videolist,
      calendarRef,
      isToday,
      playVideo,
      prevMonth,
      nextMonth,
      selectDate
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  z-index: 100;
  display: flex;
  .side {
    margin-right: 0.5rem;
    .calendar {
      // width: 300px;
      background: rgba(97, 181, 247, 0.2);
      border-radius: 0.15rem;
      padding: 0.125rem;
      .calendar-header {
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p img {
          width: 0.1rem;
          cursor: pointer;
        }
      }
      .calendar-days {
        display: flex;
        margin-top: 0.2rem;
      }
      .calendar-days span {
        width: 0.6rem;
        text-align: center;
      }
      .calendar-body {
        display: grid;
        grid-template-columns: repeat(7, 0.6rem);
      }
      .calendar-body span {
        width: 0.6rem;
        height: 0.5rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .current-date {
        background-color: blue;
        color: white;
      }
    }
    .education {
      line-height: 0.4rem;
      // height: 45vh;
      max-height: 45vh;
      overflow: auto;
      background: rgba(97, 181, 247, 0.2);
      border-radius: 0.15rem;
      padding: 0.1rem 0.3rem;
      // padding-top: .5rem;
      .title {
        display: flex;
        span {
          margin-right: 0.5rem;
          color: rgba(97, 181, 247, 1);
        }
      }
      .list {
        display: flex;
        line-height: .5rem;
        justify-content: space-between;
        .index {
          width: 0.3rem;
          text-align: center;
          display: inline-block;
        }
        .play {
          cursor: pointer;
          color: rgba(99, 216, 224, 1);
        }
        span {
          margin-right: 0.3rem;
          // color: rgba(97, 181, 247, 1);
        }
      }
    }
  }
  .safe {
    .title {
      display: flex;
      width: 4rem;
      align-items: center;
      line-height: 0.5rem;
      margin: 0.2rem 0;
      font-weight: 700;
      background-image: linear-gradient(
        to right,
        rgba(61, 173, 252, 0.2),
        rgba(212, 234, 250, 0)
      );
      // background-color: linear-gradient(90deg, rgba(2, 14, 23, 0.2) 0%, rgba(212, 234, 250, 0) 100%);;
      img {
        width: 0.15rem;
        margin: 0 0.2rem;
      }
    }
    .video {
      width: 76vw;
      height: 78vh;
      overflow: hidden;
      img {
        // width: 100%;
        // height: 78vh;
        height: 100%;
        display: block;
        margin: 0 auto;
        margin-top: 0.1rem;
      }
      :deep(.swiper-container) {
        position: relative;
        height: 78vh;
        overflow: hidden;
        .swiper-button-next:after,.swiper-button-prev::after {
          // font-size: 1rem !important;
          display: none;
        }
        .swiper-button-prev,.swiper-button-next{
          img{
            width: .8rem;
            height: .8rem
          }
        }
        .swiper-button-prev{
          left: .4rem;
        }
        .swiper-button-next{
          right: .4rem;
        }
      }
      .safe_video video{
        width: 100%;
        height: 78vh;
      }
    }
  }
}
:deep(.el-calendar) {
  width: 100%;
  // height: 30vh;
  border-radius: 0.15rem;
  padding-bottom: 0.1rem;
  background-color: #173f61;
  .el-calendar__header {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.25rem;
    border-bottom: none;
  }
  // .el-calendar__button-group {
  //   margin-top: 0.0625rem;
  // }
  .el-button--small {
    color: aliceblue;
    background-color: #3875a8;
    height: 0.4rem;
    border: none;
    line-height: 100px;
  }
  .el-calendar__body {
    padding: 0 0.125rem;
  }
  .el-calendar-table thead th {
    padding: 0;
    color: aliceblue;
  }
  .el-calendar-table td {
    border: none;
  }
  .el-calendar-table .el-calendar-day {
    padding: 0;
  }
  .el-calendar-table .el-calendar-day {
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
  }
  .is-selected {
    background-color: #65c8db;
    border-radius: 1rem;
  }
  .el-calendar-table td.is-selected {
    background-color: #c4d1d4;
    border-radius: 1rem;
  }
  .el-calendar-table .el-calendar-day:hover {
    // background-color: #65a2f3;
    background-color: #c4d1d4;
    border-radius: 1rem;
  }
  .el-calendar-table td.is-today {
    color: #3875a8;
  }
}
.el-button-group{
  width: 100%;
  padding: .1rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: #3875a8;
  border-radius: .1rem;
  img{
    height: .15rem
  }
}
</style>
